<template>
  <!-- 视图容器 -->
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell class="banner-cell">
        <!-- 轮播图 -->
        <video-swipe></video-swipe>
      </van-cell>
      <!-- 视屏区 -->
      <van-cell v-for="item in list" :key="item">
        <!-- 视图 -->
        <div class="video-view-box">
          <div class="video-view-box__item" v-for="index in 8" :key="index">
            <video-small class="movie-cell" />
          </div>

           <!-- :ref="getRef" -->
          <video-medium class="open-movie"></video-medium>
        </div>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import videoMedium from '@/components/video-box/video-medium'
import videoSwipe from '@/components/video-box/video-swipe'
import { ref } from 'vue'
import { Toast } from 'vant'
export default {
  components: {
    videoMedium,
    videoSwipe
  },
  setup() {
    const count = ref(0)
    const loading = ref(false)

    const list = ref([])
    const finished = ref(false)
    const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功')
        loading.value = false
        count.value++
      }, 1000)
    }
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 40) {
          finished.value = true
        }
      }, 1000)
    }
    /** 交叉视口 异步监听视屏是否出现在视口部分 */
    // const io = new IntersectionObserver((entries) => {
    //   entries.forEach((entries) => {
    //     // console.log();
    //     if (entries.isIntersecting) {
    //       console.log('出现在视口')
    //     } else {
    //       console.log('消失在视口')
    //     }
    //   })
    // }, {})
    // const getRef = (el) => {
    //   io.observe(el.$el)
    // }

    return {
      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      count,
      // getRef
    }
  }
}
</script>

<style lang="scss" scoped>
// .vanlist-box {
// ::v-deep .van-list {
//   height: 82vh;
//   overflow-y: scroll;
// }
::v-deep .van-cell {
  background-color: seashell;
  padding: 0;
}
// 视图容器盒子
.video-view-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // padding-left: 10px;
  margin-left: 10px;
  &__item {
    flex: 1;
    margin-bottom: 10px;
  }
}
// }
</style>
